import { Component } from 'vue-facing-decorator'
import Render from '@/render/Render'
import toNative from '@/utils/toNative'
import { DatePicker,Timeline, TimelineItem } from 'ant-design-vue'
import { DownCircleOutlined } from '@ant-design/icons-vue'

@Component
export class ApplicationRecord extends Render {
    renderHead() { 
        return (
            <div class="px-16 py-12 flex items-center justify-between bg-[#FAFAFC]">
                <div class="text-black-100 font-semibold text-lg">工种申请记录</div>
                <DatePicker placeholder="请选择日期" />
            </div>
        )
    }
	
    renderTimeline() { 
        return (
            <div class="mt-16">
                <Timeline  >
                    <TimelineItem color="#FF7642">
                        { this.renderTimelineItem() }
                    </TimelineItem>
                    <TimelineItem color="#9EAFFA">{ this.renderTimelineItem() }</TimelineItem>
                    <TimelineItem color="#00D679">{ this.renderTimelineItem() }</TimelineItem>
                </Timeline>	
            </div>
        )
    }
	
    renderTimelineItem() {
        return (
            <div>
                <div>已驳回</div>
                <div>2021.10.28 14:20:39 <DownCircleOutlined /></div>
                <div class="mt-8 bg-fill rounded-sm px-16 py-16">
                    <div class="flex mb-16">
                        <div class="text-black-300 text-base flex-none w-19">视频/照片：</div>
                        <div class="">内容</div>
                    </div>
                    <div class="flex mb-16">
                        <div class="text-black-300 text-base flex-none w-19">工种：</div>
                        <div class="">快递仓储业打包扫描分拣（不涉及传送带/搬运/装卸/中转运）、快递仓储业扫描分拣（涉及传送带）</div>
                    </div>
                </div>
            </div>
        )
    }

    render() {
        return (
            <>
                {this.renderHead()}
                { this.renderTimeline() }
            </>
        )
    }
}

export default toNative<{}, {}>(ApplicationRecord)